<template>
  <div class="login">
    <Myalert :message="msg" :color="alertColor" v-if="isAlertShow" @close-alert="closeAlertFn"></Myalert>
    <div class="img">
      <img src="../assets/logoko (2).png" alt="" />
    </div>
    <form action="">
      <div>
        <input v-model="form.userphone" type="tel" placeholder="请输入手机号" maxlength="11" />
      </div>
      <div>
        <input v-model="form.userpwd" type="password" placeholder="请输入密码" />
      </div>
      <div class="btn">
        <div class="have"><button @click.prevent="loginFn">登录</button></div>
        <div class="no">
          <a @click="jumpRegister">没有账号</a>
          <a @click="jumpForget">忘记密码</a>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import Myalert from '@/components/Myalert'
export default {
  components: {
    Myalert,
  },
  data() {
    return {
      msg: "这是xxx弹窗",
      isAlertShow: false,
      alertColor: '#fff',
      form: {
        userphone: '',
        userpwd: ''
      },
      ishave: false,
      isTrue: false
    }
  },
  methods: {
    // 登录方法
    loginFn() {
      // 检查浏览器本地是否存在USERS这个储存
      let usersstr = localStorage.getItem("USERS");

      // 判断本地是否有储存
      if (usersstr) {
        let users = JSON.parse(usersstr);
        // console.log(users);
        let { userphone, userpwd } = this.form;
        users.forEach(element => {
          if (element.userphone === userphone) {
            this.ishave = true; // 标记用户已找到  
            if (element.userpwd === userpwd) {
              this.isTrue = true;
              // 可以在这里执行用户登录成功的逻辑  
            } else {
              // console.log(222);
              this.showAlertFn("密码错误", "#fb0201");
              // 不需要继续遍历，因为已经找到了用户但密码错误  
              return; // 退出当前循环迭代  
            }
            // 如果密码正确，也不需要继续遍历，因为已经找到了正确的用户  
            return; // 退出当前循环迭代  
          }
        });

        // 遍历结束后检查是否找到了用户  
        if (!this.ishave) {
          this.showAlertFn("不存在该用户", "#fb0201");
        }
        // 匹配用户信息
        // 判断是否有值
        if (userphone && userpwd) {
          // 匹配账号密码
          let arr = users.filter(item => {
            if (item.userphone == userphone && item.userpwd == userpwd) {
              return item;
            }

          })
          // 如果arr数组长度为1,恭喜你登录成功
          if (arr.length == 1) {
            this.showAlertFn("登录成功", "#33fffe");
            //因为不是真实登录，没有做临时身份token
            //故 把user_id 储存在本地
            localStorage.setItem("USER_ID", arr[0].userid);
            // 跳转首页
            setTimeout(() => {
              this.$router.replace({ path: '/' })
            }, 500)
          }
        }
        else {
          this.showAlertFn("输入框不能为空", "#fb0201");
        }
      }
    },
    jumpRegister() {
      this.$router.replace({ path: '/register' }).catch(err => { })
    },
    jumpForget() {
      this.$router.replace({ path: '/forget' }).catch(err => { })
    },
    // 关闭自定义弹窗
    closeAlertFn(value) {
      // 检查代码
      // console.log(value)
      this.isAlertShow = value;
    },
    // 显示自定义弹窗
    showAlertFn(message, color = "#000") {
      this.msg = message;
      this.isAlertShow = true;
      this.alertColor = color;
    }
  },
};
</script>

<style lang="less" scoped>
@import "../style/variable.less";

.login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #d6ceec;

  .img {
    width: 100px;
    height: 100px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  form {
    width: 100%;
    height: 100%;
    margin-top: 100px;

    div {
      width: 80%;
      margin: 0 auto;

      input {
        width: 300px;
        height: 40px;
        padding: 0 15px;
        margin: 10px 0;
        font-family: logotext;
        border-radius: 5px;
      }
    }

    .btn {
      width: 300px;

      .have {
        width: 300px;
        margin-top: 30px;

        button {
          width: 300px;
          height: 40px;
          color: #baa6f2;
          font-weight: bolder;
          font-size: 18px;
          font-family: logotext;
          border-radius: 5px;

          &:focus {
            background-color: #baa6f2;
            color: #fff;
          }
        }
      }

      .no {
        display: flex;
        width: 300px;
        margin: 20px auto;
        justify-content: space-between;

        a {
          text-align: center;
          width: 120px;
          height: 30px;
          color: #baa6f2;
          font-weight: bolder;
          font-size: 12px;
          font-family: logotext;
          border-radius: 5px;

          &:focus {
            background-color: #e2dcf1;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>